import { MenuOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu } from 'antd';
import Image from 'next/image';
import router from 'next/router';
import styled from 'styled-components';
import { floatingMenuList } from '../libs/menuCommon';
import { defaultChartColor } from '../libs/styles/common';

function FloatingMenu() {
  const icon = (src: string) => (
    <span style={{ verticalAlign: 'text-top', marginRight: 10 }}>
      <Image src={`/images/${src}`} alt={`/images/${src}`} width={20} height={20} />
    </span>
  );

  const onClick = (href: string) => router.push(href);
  const menu = (
    <Menu>
      {floatingMenuList.map((d: any, index: number) => (
        // <Menu.Item key={index} onClick={() => onClick(d.href)}>
        <Menu.Item key={d.id} onClick={() => onClick(d.href)}>
          {icon(d.svgPath)} {d.name}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <Dropdown overlay={menu} placement="topCenter">
      <Div style={{ position: 'fixed', bottom: 70, right: 50, zIndex: 10 }}>
        <CustomButton
          type="primary"
          shape="circle"
          icon={<MenuOutlined />}
          size="large"
        />
      </Div>
    </Dropdown>
  );
}
export default FloatingMenu;

const Div = styled.div`
  position: fixed;
  bottom: 70px;
  right: 50px;
  z-index: 10;
`;
const CustomButton = styled(Button)`
  background-color: ${defaultChartColor};
  border: ${defaultChartColor};
  box-shadow: 2px 2px 3px rgba(0, 77, 255, 0.55);
  &:hover,
  &:focus {
    background-color: ${defaultChartColor};
    border: ${defaultChartColor};
    opacity: 0.9;
  }
`;
